<template>
  <n-layout position="absolute" >
    <n-layout-content :native-scrollbar="false">
      <div :style="`height:  ${contentHeight}rem;position: relative;`">
        <n-notification-provider>
        <router-view />
      </n-notification-provider>
      </div>
    </n-layout-content>
    <n-layout-footer position="absolute">
      <footer class="foot" :style="`background-color: ${theme};`">
        <nav class="foot_nav">
          <ul>
            <li>
              <router-link to="/home">
                <i class="iconfont icon-index"></i>
                <span>首页</span>
              </router-link>
            </li>
            <li>
              <router-link to="/video">
                <i class="iconfont icon-ztlistshipin"></i>
                <span>西瓜视频</span>
              </router-link>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-jia"></i>
                <span>发头条</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-huoshanxiaoshipin-"></i>
                <span>小视频</span>
              </a>
            </li>
            <li v-if="!login.isLogin">
              <router-link to="/login">
                <i class="iconfont icon-weidenglu"></i>
                <span>未登录</span>
              </router-link>
            </li>
            <li v-else>
              <router-link to="/me">
                <i class="iconfont icon-weidenglu"></i>
                <span>我  的</span>
              </router-link>
            </li>
          </ul>
        </nav>
      </footer>
    </n-layout-footer>
  </n-layout>
</template>


<script setup lang="ts">
    import { storeToRefs } from 'pinia'; 
  
    import {useMainStore, useLoginStore}  from '@/store/index';
import { computed, onMounted } from 'vue';
  
  
    const main = useMainStore()
    const login = useLoginStore()
  
    // const { author } =  storeToRefs(main)
  
  
    const theme  = computed(()=>{
      return main.theme
    })//main.theme

    const contentHeight = computed(()=>{
      let h = document.body.clientHeight
      if(!!main.fontSize) {
          let h1 = (h / main.fontSize - 0.8) 
          return h1
      }
    })

    // 生命周期DOM节点全部加载完成后的钩子函数； DOM元素渲染完成； ready()
    onMounted(()=>{
      //给窗口添加监听，
       window.addEventListener("resize",resize)
      console.log("app mounted... ...")
    })
    let resize = function(){
		var html = document.querySelector("html");
    var size = html.offsetWidth / 750 * 100
    main.setFontSize(size)
		html.style.fontSize = size + "px";   
	} 
  
  //首次渲染该APP根组件，设置当前的fontSize
  resize()
  </script>
<style scoped lang="scss"></style>